<template>
  <a-modal
    title="支付"
    width="45%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <div :style="{ margin: '16px 0', textAlign: 'center' }">
        <a-radio-group
          name="status"
          size="large"
          v-model="status"
        >
          <a-radio
            :value="1"
            :checked="status === 1"
          >
            处理中
          </a-radio>
          <a-radio
            :value="2"
            :checked="status === 2"
          >
            已完成
          </a-radio>
        </a-radio-group>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
export default {
  data () {
    return {
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 }
      },
      visible: false,
      confirmLoading: false,
      status: 0,
      updateStatusParams: {}
    }
  },
  methods: {
    show (updateStatusParams) {
      this.visible = true
      this.updateStatusParams = updateStatusParams
    },
    handleSubmit () {
      if (this.status === 0) return
      this.confirmLoading = true
      this.$emit('updateStatus', {
        ...this.updateStatusParams,
        status: this.status
      }, () => {
        this.confirmLoading = false
        this.handleCancel()
      })
    },
    handleCancel () {
      this.status = ''
      this.visible = false
    }
  }
}
</script>
